.<template>
    <div class="container">
        <div class="header">
            <img class="header-img" src="@/assets/images/rope-skipping-header.png" />
            <div class="header-title">跳绳-{{homeActive==1?'测试':'练习'}}</div>
            <!-- <div class="header-type">{{homeActive==1?'测试':'练习'}}</div> -->
            <img class="header-star" src="@/assets/images/star.png" />
        </div>
        <div class="content">
            <div v-for="(item,index) in list" :key="item">
                <template v-if="item.type==1">
                    <div class="content-item">
                        <div class="content-item-num">{{index+1}}号</div>
                        <div class="content-item-status">空闲中</div>
                        <img class="content-item-ic" src="@/assets/images/rope-skipping-ic.png" />
                        <div class="content-item-type">举手开始</div>
                    </div>
                </template>
                <template v-if="item.type==2">
                    <div class="content-item">
                        <div class="content-item-num">{{index+1}}号</div>
                        <div class="content-item-name">{{ item?.user.xsName }}</div>
                        <img class="content-item-head" :src="item?.user.xsZp" />
                        <div class="content-item-class">{{ item?.user.bjName }}</div>
                        <div class="content-item-type">等待中</div>
                    </div>
                </template>

                <template v-if="item.type==3">
                    <div class="content-item" style="background-color: #03C25F;">
                        <div class="content-item-num">{{index+1}}号</div>
                        <div class="content-item-name">{{ item?.user.xsName }}</div>
                        <div class="content-item-value">{{ value }}</div>
                        <div class="content-item-label">个数</div>

                        <div class="content-item-seconds">{{ seconds }}秒</div>
                    </div>
                </template>
                <template v-if="item.type==4">
                    <div class="content-item" style="background-color: #C7AA1B">
                        <!-- <div class="content-item-num">{{index+1}}号</div> -->
                        <div class="content-item-name">{{ item?.user.xsName }}</div>
                        <img class="content-item-head" style="margin-top: 20px;" :src="item?.user.xsZp" />
                        <div class="content-item-class" style="margin-top: 20px; font-size: 40px;">{{ item?.user.bjName }}</div>
                        <div class="content-item-row" style="margin-top: 30px;">
                            <img src="@/assets/images/achievements.png" />
                            <div class="content-item-row-label">成绩</div>
                            <div class="content-item-row-value">{{ form.value }} <span style="margin-top: 60px;">次</span></div>
                        </div>
                        <div class="content-item-row" style="margin-top: 20px;">
                            <img src="@/assets/images/score.png" />
                            <div class="content-item-row-label">评分</div>
                            <div class="content-item-row-value">{{form.score  }}<span style="margin-top: 60px;">分</span></div>
                        </div>
                    </div>
                </template>

            </div>
        </div>

    </div>
    <Ranking v-if="rankingVisible" @close="rankingClose" unit="个" :data="list" />
    <Teleport to="body">
        <div class="countdown" v-if="showCountdown">
            {{ remainingTime >0 ?remainingTime:'go'}}
        </div>
    </Teleport>
</template>
 
<script setup name="Home">
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import useUserStore from '@/store/modules/user'
import { tcsjOrig } from '@/api/tc/plan.js'
import { storeToRefs } from 'pinia'
import Ranking from './Ranking'
const userStore = useUserStore();
const { homeActive } = storeToRefs(userStore)
const { proxy } = getCurrentInstance();
const router = useRouter();
const rankingVisible = ref(false);
const type = ref(1);
const list = ref([{ type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 },]);
const index = ref(0);
let timer;
const userList = ref([])
const remainingTime = ref(15);
const showCountdown = ref(false);
const seconds = ref(1);
const form = ref({})
const value = ref(1);
const emits = defineEmits(['start', 'scanfase']);
defineExpose({
    init, resetData, ahievements
})

function start() {
    if (!timer) {

        timer = setInterval(() => {
            if (remainingTime.value > 0) {
                remainingTime.value--
            } else {
                stop();
                showCountdown.value = false;
                list.value[index.value].type = 3;

                value.value = 1;
                let maxValue = 999;
                let interval = randomInt(100, 1000);
                let timer1 = setInterval(() => {
                    if (value.value <= maxValue) {
                        value.value++
                    } else {
                        clearInterval(timer1);
                        list.value[index.value].type = 4;
                        submit();

                    }
                }, interval)
                seconds.value = 6;
                let timer = setInterval(() => {
                    if (seconds.value > 0) {
                        seconds.value--
                    } else {
                        maxValue = 1;
                        clearInterval(timer);

                    }

                }, 1000)


            }

        }, 1000)
    }
}
//成绩
function ahievements(obj) {
    console.log(obj)
    // //身份证对比
    // if (user.value && user.value.xsSfz == obj.sjSfz) {

    //     user.value['value'] = obj.sjDfsz;
    //     user.value['score'] = obj.sjFs;
    //     type.value = 3;
    //     proxy.$modal.msgSuccess("30秒自动返回");
    //     setTimeout(() => {
    //         resetData(true);
    //     }, 30000)


    // }

}

/**
 * 关闭排行
 */
function rankingClose() {
    rankingVisible.value = false;
    userList.value = [];
    list.value = [{ type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }]
}

let timeout;
//数据重置
function resetData() {
    type.value = 1;
    value.value = 1;
    userList.value = [];
    list.value = [{ type: 1 }, { type: 1 }, { type: 1 }, { type: 1 }, { type: 1 },];
    form.value = {};
    seconds.value = 1;
    index.value = 0;
    showCountdown.value = false
    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }

    if (timer) {
        clearInterval(timer)
        timer = null
    }
}

function submit() {
    form.value = {
        value: value.value,
        score: randomInt(40, 100)
    }
    //proxy.$modal.msgSuccess("成绩提交成功，5秒后返回");
    // tcsjOrig({
    //     sjXsid: list.value[0].user.id,//学生id
    //     sjXxid: list.value[0].user.xsSchool,//学校id
    //     sjFs: form.value.score, //分数
    //     sjDfsz: form.value.value, //得分数值
    //     sjNj: list.value[0].user.xsNj,//年级
    //     sjTcxmid: 6, //1分跳绳

    // }).then(res => {

    // })
    setTimeout(() => {

        rankingVisible.value = true;
    }, 2000)
}

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function stop() {
    if (timer) {
        clearInterval(timer)
        timer = null
    }
}
// 重置倒计时
function reset() {
    stop();
    remainingTime.value = 15
    start();

}

//更新学生
function init(val) {
    if (!val || userList.value.length == 5) return;
    //将用户添加到用户列表
    userList.value.push(val);

    // list.value[userList.value.length - 1].type  1举手识别   2识别出来学生等待中   3发令  4结束
    list.value[userList.value.length - 1]['user'] = val;
    list.value[userList.value.length - 1].type = 2;
   
    if (!showCountdown.value) {
         proxy.$modal.msgSuccess("15秒后开始");
         showCountdown.value = true;
        reset();
    }

}


//模拟切换状态

</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.countdown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 240px;
    font-weight: bold;
}
.header {
    position: absolute;
    width: 680px;
    right: 130px;
    top: 17px;

    &-img {
        width: 388px;
        height: 388px;
    }
    &-title {
        position: absolute;
        top: 170px;
        right: 20px;
        font-family: YouSheBiaoTiHei;
        font-size: 80px;

        line-height: 58px;
        letter-spacing: 0.04em;
        font-variation-settings: "opsz" auto;
        color: #f3d500;
    }
    &-type {
        position: absolute;
        top: 182px;
        right: 20px;
        width: 100px;
        height: 44px;
        border-radius: 4px;

        display: flex;
        justify-content: center;
        align-items: center;
        background: #f3d500;
        color: #333;
    }
    &-star {
        position: absolute;
        top: 160px;
        right: 0px;
        width: 16px;
        height: 24px;
    }
}
.content {
    position: relative;
    display: flex;
    margin: 289px 110px 0 110px;
    width: 1690px;
    justify-content: space-between;
    z-index: 2;
    &-item {
        width: 327px;
        height: 668px;
        border-radius: 14px;
        opacity: 1;
        background: #236be7;
        display: flex;
        flex-direction: column;
        align-items: center;

        &-row {
            width: 100%;
            padding: 0 10px;
            display: flex;
            overflow: hidden;
            user-select: none;
            align-items: center;
            img {
                margin-left: 16px;
                margin-top: 30px;
                width: 24px;
                height: 24px;
                position: relative;
            }
            &-label {
                margin-top: 30px;
                // width: 140px;
                margin-left: 10px;
                font-size: 24px;
                color: #ffffff;
            }
            &-value {
                width: 200px;
                display: flex;
                justify-content: flex-end;
                position: relative;
                font-size: 90px;
                color: #fff;
                span {
                    font-size: 16px;
                }
            }
        }
        &-label {
            margin-top: 20px;

            font-size: 40px;
            color: #fff;
        }

        &-value {
            margin-top: 50px;

            font-size: 100px;
            color: #fff;
        }
        &-seconds {
            position: absolute;
            left: 58 px;
            bottom: 68px;
            width: 210px;
            height: 62px;
            border-radius: 139px;

            background: #029649;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #ffffff;
        }
        &-class {
            display: flex;
            justify-content: center;
            overflow: hidden;
            margin-top: 50px;
            width: 300px;
            font-size: 50px;
            color: #fff;
        }
        &-head {
            margin-top: 50px;
            width: 98px;
            height: 98px;
            border-radius: 50%;
        }

        &-name {
            margin-top: 50px;
            font-size: 48px;
            color: #ffffff;
        }

        &-num {
            margin-top: 67px;
            font-size: 40px;
            color: #ffffff;
        }
        &-status {
            margin-top: 50px;
            font-size: 48px;
            color: #ffffff;
        }

        &-ic {
            margin-top: 70px;
            width: 95px;
            height: 148px;
        }

        &-type {
            position: absolute;
            left: 58 px;
            bottom: 68px;
            width: 210px;
            height: 62px;
            border-radius: 139px;

            background: #1b56bc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #ffffff;
        }
    }
}
</style>

